<template>
    <div class="fines-management">
        <div class="search-container">
            <el-input v-model="search" placeholder="请输入罚款信息查询" clearable @clear="handleClearSearch"
                class="search-input" />
        </div>

        <el-table :data="fines" stripe border>
            <el-table-column prop="user_name" label="用户名称" />
            <el-table-column prop="fine_amount" label="罚款金额" />
            <el-table-column prop="borrow_status" label="借阅状态">
                <template #default="{ row }">
                    <span>
                        {{ row.borrow_status === 'borrowed' ? '借阅中' : '已归还' }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="罚款状态">
                <template #default="{ row }">
                    <span :style="{ color: row.status === 'paid' ? 'green' : 'red' }">
                        {{ row.status === 'paid' ? '已支付' : '未支付' }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="created_at" label="创建时间" />
            <el-table-column prop="updated_at" label="更新时间" />
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button size="small" @click="handleReturn(row)"
                        v-if="row.borrow_status === 'borrowed'">归还</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
            v-model:current-page="currentPage" @current-change="handlePageChange" class="pagination" />
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { finesApi } from '@/request/apiService';
import { ElMessageBox } from 'element-plus';

const fines = ref([]);
const search = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 获取罚款记录
const fetchFines = async () => {
    try {
        const { data, total: totalCount } = await finesApi.getFinesList({
            page: currentPage.value,
            pageSize: pageSize.value,
            search: search.value,
        });
        fines.value = data;
        total.value = totalCount;
    } catch (error) {
        console.error('获取罚款记录失败', error);
    }
};

// 归还操作
const handleReturn = async (row) => {
    try {
        if (row.borrow_status === 'borrowed') {
            await finesApi.updateFineStatus({ fine_id: row.fine_id });
            row.borrow_status = 'returned';
            fetchFines();
        }
    } catch (error) {
        console.error('归还操作失败', error);
    }
};

// 删除罚款记录
const handleDelete = (fine) => {
    ElMessageBox.confirm('此操作将永久删除该罚款记录, 是否继续?', '警告', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(async () => {
            try {
                await finesApi.deleteFineRecord({ fine_id: fine.fine_id });
                await fetchFines();
            } catch (error) {
                console.error('删除罚款记录失败', error);
            }
        })
        .catch(() => console.log('删除操作已取消'));
};

// 清空搜索框
const handleClearSearch = () => {
    search.value = '';
    currentPage.value = 1;
    fetchFines();
};

// 分页改变时触发
const handlePageChange = (page) => {
    currentPage.value = page;
    fetchFines();
};

// 页面加载时，获取罚款数据
onMounted(fetchFines);

// 监听搜索变化自动获取数据
watch(search, fetchFines);
</script>

<style scoped>
.fines-management {
    padding: 20px;
}

.search-container {
    display: flex;
    margin-bottom: 20px;
}

.search-input {
    width: 300px;
    margin-right: 20px;
}

.pagination {
    margin-top: 20px;
}
</style>
